<template>
  <div>
  	<!-- 添加用户对话框 -->
  	<el-dialog :title="isAdd ? '添加客户' : '编辑客户'" :visible.sync="dialogVisible" @closed="initFormData" :before-close="closeDialog" 
	:width="'50%'" top="8vh" :close-on-click-modal="false">
  		<el-form :model="form" ref="customerFormRef" :hide-required-asterisk="false" size="medium" :label-width="formLabelWidth" label-position="right"
			:rules="rules">
  			<el-form-item label="客户名" prop="name" :error="errors.name">
  			  <el-input v-model="form.name" autocomplete="off" placeholder="请输入客户名"></el-input>
  			</el-form-item>
  			<el-form-item label="昵称" prop="nickname">
  			  <el-input v-model="form.nickname" autocomplete="off" placeholder="请输入昵称"></el-input>
  			</el-form-item>
  			<el-form-item label="微信" prop="wechat">
  			  <el-input v-model="form.wechat" autocomplete="off" placeholder="请输入微信"></el-input>
  			</el-form-item>
  			<el-form-item label="QQ"  prop="qq">
  			  <el-input v-model="form.qq" placeholder="请输入QQ号" @input="qqInput"></el-input>
  			</el-form-item>
			<el-form-item label="手机号" prop="telephone" :error="errors.telephone">
			  <el-input v-model="form.telephone" placeholder="请输入手机号" type="tel" @input="telephoneInput" maxlength="11"></el-input>
			</el-form-item>
			<el-form-item label="地址" prop="address_code">
			  <!-- <el-input v-model="form.address" placeholder="请输入地址"></el-input> -->
				<el-cascader
				  placeholder="可搜索地址"
				  :options="options"
				  v-model="form.address_code"
				  style="width: 100%;"
				  filterable>
				</el-cascader>
			</el-form-item>
			<el-form-item label="等级" prop="grade">
			  <el-select v-model="form.grade" placeholder="请选择等级" style="width: 100%;">
				  <el-option
					v-for="item in gradeOptions"
					:key="item.value"
					:label="item.label"
					:value="item.value">
				  </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="客户平台" prop="platform" :error="errors.platform">
			  <el-select v-model="form.platform" placeholder="请选择客户平台" style="width: 100%;">
				  <el-option
					v-for="item in platformOptions"
					:key="item.value"
					:label="item.label"
					:value="item.value">
				  </el-option>
				</el-select>
			</el-form-item>
  		</el-form>
  		<div slot="footer" class="dialog-footer">
  			<el-button @click="closeDialog">取 消</el-button>
  			<el-button type="primary" @click="isAdd ? addSubmitForm() : editSubmitForm()">确 定</el-button>
  		</div>
  	</el-dialog>

  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { addCustomer, editCustomer } from '@/api/customer'
	import { provinceAndCityData, CodeToText, regionData } from 'element-china-area-data'

  export default {
  	computed: {
      ...mapGetters([
        "gradeOptions",
        "platformOptions",
      ])
    },
    data () {
      return {
				options: regionData,
        formLabelWidth: '80px',
        // fit: "scale-down",
        dialogVisible: false,
        isAdd: false,
        form: {
            name: "",
            nickname: "",
            wechat: "",
            qq: "",
            telephone: "",
            address_code: "",
						grade: "A",
						platform: 1,
				},
				rules: {
					name: [
						{ required: true, message: '请输入客户名', trigger: 'blur' },
						{ max: 20, message: '长度在 1 到 20 个字符', trigger: 'change' }
					],
					telephone: [
						{ min: 11, max: 11, message: '请输入正确手机号', trigger: 'blur' }
					],
				},
				errors: {
					name: "",
					nickname: "",
					wechat: "",
					qq: "",
					telephone: "",
					address_code: "",
					grade: "",
					platform: "",
				}
      }
    },
    methods: {
			// 只能输入数字 并判断手机号规则
			telephoneInput (val) {
				this.form.telephone = val.replace(/[^0-9]/g, '');
				this.errors.telephone = ""
				this.$refs.customerFormRef.clearValidate(["telephone"])
			},
			qqInput (val) {
				this.form.qq = val.replace(/[^0-9]/g, '');
				this.errors.qq = ""
				this.$refs.customerFormRef.clearValidate(["qq"])
			},
			addressHandleChange (value) {
				if (value != undefined) {
					let province = CodeToText[value[0]]
					let city = CodeToText[value[1]]
					let area = CodeToText[value[2]]
					this.form.address = province + " " + city + " " + area
				} else {
					this.form.address = ""
				}
			},
      closeDialog () {
        this.dialogVisible = false
      },
      initFormData () {
        this.form = {
          name: "",
          nickname: "",
          wechat: "",
          qq: "",
          telephone: "",
          address_code: "",
          grade: "A",
          platform: 1,
        }
				for (let item in this.errors) {
					this.errors[item] = ""
				}
				this.$refs.customerFormRef.clearValidate()
      },
      addSubmitForm () {
				// console.log(this.form)
        addCustomer(this.form).then(res => {
		      // console.log(res)
          this.closeDialog()
          this.$successMsg("添加成功")
          this.$emit("reloadTable")
        }).catch(err => {
          console.log(err)
					if (err.data) {
						for (let field in err.data) {
							this.errors[field] = err.data[field][0]
						}
					}
        })
      },
      editSubmitForm() {
				// console.log(this.form)
        editCustomer(this.form.id, this.form).then(res => {
          this.closeDialog()
          this.$successMsg("更新成功")
          this.$emit("reloadTable")
        }).catch(err => {
          console.log(err)
					if (err.data) {
						for (let field in err.data) {
							this.errors[field] = err.data[field][0]
						}
					}
        })
      },
    }
  }
</script>

<style lang="scss">

  .works-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .works-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .works-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
  }
  .works {
    width: 200px;
    height: 200px;
    display: block;
    object-fit: scale-down;
  }

	.works-label {
		margin-bottom: 10px;
	}

</style>
